21. Draw a CRP Diagram - Hard

INSTRUCTOR NOTE:

Link to CRP Diagrams forum discussion

Cameron will be analyzing mobile reddit in the answer video.

This course teaches you how to render the first frame quickly, but what about all the frames that follow? Take Browser Rendering Optimization with Cameron and Paul Lewis to learn how to build apps that run at 60 frames per second!

Follow your instructors!

+Ilya Grigorik, @igrigorik

@cwpittman
Cameron will be analyzing the mobile version of reddit in the answer video.
If you can't post your diagram on the forum, grab a friend and explain your CRP diagram to them!

Cameron: Ah, there's an error in my explanation. The minimum CRP Length is 2 because the critical CSS and JS resources can be downloaded in parallel. That's 1 RTT for the HTML and 1 RTT for the rest of the resources, making the minimum CRP Length 2.
Also, there's a very good chance that reddit has changed since this course was released. Check it out, but you may likely see something different than what I do in this video.
Speaking of reddit, I started a discussion in r/webdev on the course!

• Use Ctrl+Shift+I on Windows, or Cmd+Opt+I on Mac to open the DevTools.
  
• Use Ctrl+Shift+R on Windows, or Cmd+Shift+R on Mac to reload the page and capture the timeline.
  PROTIP: In order to use the hard reload trick to capture the full trace, you have to load the page first, open Timeline in DevTools, start and stop recording, and then use the shortcuts described above to reload the page. Basically, open DevTools and hit the record button twice before doing a hard reload.
  Check out DevTools emulation docs for a detailed walkthrough of how to emulate a mobile device.